<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<title>小 X 博客</title>
<link rel="stylesheet" href="https://www.xingzhenghang.tk/ui/css/mdui.min.css"/>
<script async src="https://www.xingzhenghang.tk/js/mdui.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width"/>

</head>

<body>

<!-- top bar 顶栏 -->
<div class="mdui-color-indigo mdui-toolbar">
  <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">chrome_reader_mode</i></a>
  <span class="mdui-typo-title">小 X 博客</span>
</div>


<div class="mdui-container doc-container">
<br>
<div class="mdui-typo">
  <h1>这是我的第一个博客 <br> <small>这是我的第一个博客。</small></h1>

  <p><strong>作者：</strong> <abbr title="Responsive web design">小 X</abbr> <strong/> <kbd>测试类</kbd> <strong/> <kbd>2019/8/22</kbd></p>

<hr/>

<div class="mdui-typo-display-4">这是博客</div>
<div class="mdui-typo-display-3">这是博客</div>
<div class="mdui-typo-display-2">这是博客</div>
<div class="mdui-typo-display-1">这是博客</div>
<div class="mdui-typo-headline">这是博客</div>
<div class="mdui-typo-title">这是博客</div>
<div class="mdui-typo-subheading">这是博客</div>
<div class="mdui-typo-body-2">这是博客</div>
<div class="mdui-typo-body-1">这是博客</div>
<div class="mdui-typo-caption">这是博客</div>

<div class="mdui-typo-display-4-opacity">这是博客</div>
<div class="mdui-typo-display-3-opacity">这是博客</div>
<div class="mdui-typo-display-2-opacity">这是博客</div>
<div class="mdui-typo-display-1-opacity">这是博客</div>
<div class="mdui-typo-headline-opacity">这是博客</div>
<div class="mdui-typo-title-opacity">这是博客</div>
<div class="mdui-typo-subheading-opacity">这是博客</div>
<div class="mdui-typo-body-2-opacity">这是博客</div>
<div class="mdui-typo-body-1-opacity">这是博客</div>
<div class="mdui-typo-caption-opacity">这是博客</div>

<h2 class="doc-title mdui-text-color-indigo">标题</h2>
<h1>h1 标题 这是博客</h1>
<h2>h2 标题 这是博客</h2>
<h3>h3 标题 这是博客</h3>
<h4>h4 标题 这是博客</h4>
<h5>h5 标题 这是博客</h5>
<h6>h6 标题 这是博客</h6>

<h2 class="doc-title mdui-text-color-indigo">副标题</h2>
  <h1>h1 标题 这是博客 <small>副标题 这是博客</small></h1>
  <h2>h2 标题 这是博客 <small>副标题 这是博客</small></h2>
  <h3>h3 标题 这是博客 <small>副标题 这是博客</small></h3>
  <h4>h4 标题 这是博客 <small>副标题 这是博客</small></h4>
  <h5>h5 标题 这是博客 <small>副标题 这是博客</small></h5>
  <h6>h6 标题 这是博客 <small>副标题 这是博客</small></h6>

<h2 class="doc-title mdui-text-color-indigo">各种格式</h2>
  <p><a href="#">这是一个链接</a></p>
  <p>使用 mark 标签来<mark>高亮文本</mark>。</p>
  <p><del>这行文本被视为已删除文本。</del></p>
  <p><ins>这行文本是被强势插入的元素。</ins></p>
  <p><u>这行文本带有下划线。</u></p>
  <p><small>这行文本字体被缩小了。</small></p>
  <p><strong>这行文本被加粗了。</strong></p>
  <p><em>这段文本是斜体的。</em></p>
  <p>响应式设计缩写 <abbr title="Responsive web design">RWD</abbr></p>
  <p>这行文本包含内联代码 <code> code </code></p>
  <p>按下 <kbd>Esc</kbd> 可以关闭对话框</p>
  <p><var>y</var> = <var>m</var><var>x</var> + <var>b</var></p>

  <hr/>

<h2 class="doc-title mdui-text-color-indigo">引用</h2>
  <blockquote>
    <p>无论走到哪里，都应该记住，过去都是假的，回忆是一条没有尽头的路，一切以往的春天都不复存在，就连那最坚韧而又狂乱的爱情归根结底也不过是一种转瞬即逝的现实。</p>
    <footer>马尔克斯 ——《百年孤独》</footer>
  </blockquote>

<h2 class="doc-title mdui-text-color-indigo">代码块</h2>
<pre class="html5" style="font-family:monospace;"><ol><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h2</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;doc-title mdui-text-color-indigo&quot;</span>&gt;</span>各种格式<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h2</span>&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>这是一个链接<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span>&gt;</span>使用 mark 标签来<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">mark</span>&gt;</span>高亮文本<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">mark</span>&gt;</span>。<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">del</span>&gt;</span>这行文本被视为已删除文本。<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">del</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">ins</span>&gt;</span>这行文本是被强势插入的元素。<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">ins</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span>&gt;&lt;u&gt;</span>这行文本带有下划线。<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span>u&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">small</span>&gt;</span>这行文本字体被缩小了。<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">small</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">strong</span>&gt;</span>这行文本被加粗了。<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">strong</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">em</span>&gt;</span>这段文本是斜体的。<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">em</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span>&gt;</span>响应式设计缩写 <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">abbr</span> <span style="color: #000066;">title</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;Responsive web design&quot;</span>&gt;</span>RWD<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">abbr</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span>&gt;</span>这行文本包含内联代码 <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">code</span>&gt;</span> code <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">code</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span>&gt;</span>按下 <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">kbd</span>&gt;</span>Esc<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">kbd</span>&gt;</span> 可以关闭对话框<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">var</span>&gt;</span>y<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">var</span>&gt;</span> = <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">var</span>&gt;</span>m<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">var</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">var</span>&gt;</span>x<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">var</span>&gt;</span> + <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">var</span>&gt;</span>b<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">var</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span></div></li></ol></pre>

<h2 class="doc-title mdui-text-color-indigo">无序</h2>

  <ul>
    <li>条目 #1</li>
    <li>条目 #2
      <ul>
        <li>条目 #1</li>
        <li>条目 #2
          <ul>
            <li>条目 #1</li>
            <li>条目 #2</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>条目 #3</li>
    <li>条目 #4</li>
  </ul>

<h2 class="doc-title mdui-text-color-indigo">有序</h2>
  <ol>
    <li>条目 #1</li>
    <li>条目 #2
      <ol>
        <li>条目 #1</li>
        <li>条目 #2
          <ol>
            <li>条目 #1</li>
            <li>条目 #2</li>
          </ol>
        </li>
      </ol>
    </li>
    <li>条目 #3</li>
    <li>条目 #4</li>
  </ol>
</div>
</body>
</html>
